<template>
  <!-- :style="'background-color:#545c64'" -->
  <div class="Aside">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        :background-color="$store.state.$vt_a"
        text-color="#fff"
        :active-text-color="$store.state.$dt_a"
        :router="true"
        @select="$emit('changedrawer')"
      >
        <AsideItem v-for="v in routes" :key="v.path" :v="v" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import AsideItem from "./AsideItem";
import { mapState } from "vuex";

export default {
  name: "Aside",
  components: {
    AsideItem,
  },
  computed: {
    routes() {
      return this.$router.options.routes.filter((item) => item.path === "/")[0]
        .children;
    },
    activeMenu() {
      return this.$route.path;
    },
    ...mapState({
      isCollapse: (state) => state.isCollapse, //左边导航栏是否收起
    }),
  },
};
</script>
<style lang="scss" scoped>
.Aside {
  height: 100%;
  overflow: hidden;
  text-align: left;
}
</style>
<style lang="scss">
.Aside .el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.Aside .el-menu {
  border-right: 0px;
}
.Aside .el-menu.el-menu--inline {
  padding-top: 10px;
  background-color: #00000040 !important;
  .el-menu-item,
  .el-submenu__title {
    background-color: unset !important;
  }
  .el-menu-item:hover,
  .el-submenu__title:hover {
    outline: 0;
    background-color: #00000060 !important;
  }
}

.Aside .el-menu-item-group__title {
  padding: 0 !important;
}
.Aside .el-scrollbar {
  height: 100%;
}
.Aside .scrollbar-wrapper {
  height: 100%;
  overflow-x: hidden !important;
}
</style>